Mithril.js: Praktiline juhend kiirete ja lihtsate SPA-de ehitamiseks

Pidevalt arenevas esiotsa veebiarenduse maastikul on õige raamistiku valimine ülioluline jõudluspõhiste ja hooldatavate üheleheliste rakenduste (SPA) loomiseks. Mithril.js kerkib esile kui kaalukas valik, eriti projektide puhul, kus kiirus, lihtsus ja väike maht on esmatähtsad. See juhend annab põhjaliku ülevaate Mithril.js-ist, uurides selle põhimõisteid, eeliseid ja praktilisi rakendusi.

Mis on Mithril.js?

Mithril.js on kliendipoolne JavaScripti raamistik kaasaegsete veebirakenduste ehitamiseks. See on tuntud oma väikese suuruse (alla 10 KB gzipped kujul), erakordse jõudluse ja kasutuslihtsuse poolest. See rakendab Mudel-Vaade-Kontroller (MVC) arhitektuuri, pakkudes struktureeritud lähenemist koodi organiseerimisele.

Erinevalt mõnest suuremast ja funktsioonirikkamast raamistikust keskendub Mithril.js olulisele, võimaldades arendajatel kasutada oma olemasolevaid JavaScripti teadmisi ilma järsu õppimiskõverata. Keskendumine põhilisele funktsionaalsusele tähendab kiiremaid laadimisaegu ja sujuvamat kasutajakogemust.

Põhiomadused ja eelised

• Väike maht: Nagu mainitud, vähendab selle väike maht oluliselt laadimisaegu, mis on eriti oluline piiratud ribalaiusega piirkondade kasutajatele.
• Erakordne jõudlus: Mithril.js kasutab kõrgelt optimeeritud virtuaalse DOM-i implementatsiooni, mille tulemuseks on välkkiire renderdamine ja uuendused.
• Lihtne API: Selle API on lühike ja hästi dokumenteeritud, mis teeb selle õppimise ja kasutamise lihtsaks.
• MVC arhitektuur: Pakub selget struktuuri rakenduse koodi organiseerimiseks, edendades hooldatavust ja skaleeritavust.
• Komponendipõhine: Soodustab korduvkasutatavate komponentide loomist, lihtsustades arendust ja vähendades koodi dubleerimist.
• Marsruutimine (Routing): Sisaldab sisseehitatud marsruutimismehhanismi SPA navigeerimise loomiseks.
• XHR abstraktsioon: Pakub lihtsustatud API-d HTTP-päringute tegemiseks.
• Põhjalik dokumentatsioon: Mithril.js-il on põhjalik dokumentatsioon, mis katab kõik raamistiku aspektid.
• Brauseriteülene ühilduvus: Töötab usaldusväärselt laias valikus brauserites.

MVC arhitektuur Mithril.js-is

• Mudel (Model): Esindab teie rakenduse andmeid ja äriloogikat. See vastutab andmete hankimise, salvestamise ja manipuleerimise eest.
• Vaade (View): Kuvab andmed kasutajale. See vastutab kasutajaliidese renderdamise eest mudeli pakutud andmete põhjal. Mithril.js-is on vaated tavaliselt funktsioonid, mis tagastavad kasutajaliidese virtuaalse DOM-i esituse.
• Kontroller (Controller): Toimib vahendajana mudeli ja vaate vahel. See tegeleb kasutaja sisendiga, uuendab mudelit ja käivitab vaate uuendused.

Andmevoog Mithril.js rakenduses järgib tavaliselt seda mustrit:

1. Kasutaja suhtleb vaatega.
2. Kontroller tegeleb kasutaja interaktsiooniga ja uuendab mudelit.
3. Mudel uuendab oma andmeid.
4. Kontroller käivitab vaate uuesti renderdamise uuendatud andmetega.
5. Vaade uuendab kasutajaliidest muudatuste kajastamiseks.

Mithril.js projekti seadistamine

Mithril.js-iga alustamine on lihtne. Saate selle oma projekti lisada mitmel viisil:

• Otse allalaadimine: Laadige Mithril.js-i fail alla ametlikult veebisaidilt (https://mithril.js.org/) ja lisage see oma HTML-faili <script> sildiga.
• CDN: Kasutage sisuedastusvõrku (CDN) Mithril.js-i lisamiseks oma HTML-faili. Näiteks: <script src="https://cdn.jsdelivr.net/npm/mithril@2.0.4/mithril.min.js"></script>
• npm: Paigaldage Mithril.js npm-i abil: npm install mithril Seejärel importige see oma JavaScripti faili: import m from 'mithril';

Keerukamate projektide puhul on soovitatav kasutada ehitustööriista nagu Webpack või Parcel, et oma koodi komplekteerida ja sõltuvusi tõhusalt hallata. Need tööriistad aitavad ka selliste ülesannetega nagu ES6+ koodi transpileerimine ja JavaScripti failide minimeerimine.

Lihtne Mithril.js näide

Loome lihtsa loenduri rakenduse, et illustreerida Mithril.js-i põhimõisteid.

            // Mudel
let count = 0;

// Kontroller
const CounterController = {
  increment: () => {
    count++;
  },
  decrement: () => {
    count--;
  },
};

// Vaade
const CounterView = {
  view: () => {
    return m("div", [
      m("button", { onclick: CounterController.decrement }, "-"),
      m("span", count),
      m("button", { onclick: CounterController.increment }, "+"),
    ]);
  },
};

// Ühenda rakendus
mount(document.body, CounterView);

            

              
                Copy
              
            
          

Selgitus:

• Mudel: Muutuja count salvestab loenduri hetkeväärtuse.
• Kontroller: Objekt CounterController sisaldab meetodeid loenduri suurendamiseks ja vähendamiseks.
• Vaade: Objekt CounterView defineerib kasutajaliidese. See kasutab funktsiooni m() (Mithrili hüperskript), et luua virtuaalseid DOM-i sõlmi. Nuppude onclick atribuudid on seotud kontrolleri increment ja decrement meetoditega.
• Ühendamine (Mounting): Funktsioon m.mount() kinnitab CounterView-i document.body külge, renderdades rakenduse brauseris.

Komponendid Mithril.js-is

Mithril.js edendab komponendipõhist arhitektuuri, mis võimaldab teil jaotada oma rakenduse korduvkasutatavateks ja iseseisvateks komponentideks. See parandab koodi organiseeritust, hooldatavust ja testitavust.

Mithril.js-i komponent on objekt, millel on view meetod (ja valikuliselt teised elutsükli meetodid nagu oninit, oncreate, onupdate ja onremove). view meetod tagastab komponendi virtuaalse DOM-i esituse.

Refaktoreerime eelmise loenduri näite, et kasutada komponenti:

            // Loenduri komponent
const Counter = {
  count: 0,
  increment: () => {
    Counter.count++;
  },
  decrement: () => {
    Counter.count--;
  },
  view: () => {
    return m("div", [
      m("button", { onclick: Counter.decrement }, "-"),
      m("span", Counter.count),
      m("button", { onclick: Counter.increment }, "+"),
    ]);
  },
};

// Ühenda rakendus
mount(document.body, Counter);

            

              
                Copy
              
            
          

Selles näites on mudeli ja kontrolleri loogika nüüd kapseldatud Counter komponendi sisse, muutes selle iseseisvamaks ja korduvkasutatavamaks.

Marsruutimine (Routing) Mithril.js-is

Mithril.js sisaldab sisseehitatud marsruutimismehhanismi ühelehelise rakenduse (SPA) navigeerimise loomiseks. Funktsioon m.route() võimaldab teil defineerida marsruute ja seostada neid komponentidega.

Siin on näide, kuidas kasutada marsruutimist Mithril.js-is:

            // Defineeri komponendid erinevate marsruutide jaoks
const Home = {
  view: () => {
    return m("h1", "Home Page");
  },
};

const About = {
  view: () => {
    return m("h1", "About Page");
  },
};

// Defineeri marsruudid
m.route(document.body, "/", {
  "/": Home,
  "/about": About,
});

            

              
                Copy
              
            
          

Selles näites defineerime kaks komponenti: Home ja About. Funktsioon m.route() seob marsruudi / komponendiga Home ja marsruudi /about komponendiga About.

Marsruutide vaheliste linkide loomiseks saate kasutada m("a") elementi, mille href atribuut on seatud soovitud marsruudile:

            m("a", { href: "/about", oncreate: m.route.link }, "About");
            

              
                Copy
              
            
          

Atribuut oncreate: m.route.link annab Mithril.js-ile käsu lingi kliki käsitlemiseks ja brauseri URL-i värskendamiseks ilma lehe täieliku uuesti laadimiseta.

Mithril.js vs. teised raamistikud

JavaScripti raamistiku valimisel on oluline arvestada oma projekti spetsiifiliste nõuetega. Mithril.js pakub kaalukat alternatiivi suurematele raamistikele nagu React, Angular ja Vue.js, eriti stsenaariumides, kus jõudlus, lihtsus ja väike maht on kriitilise tähtsusega.

Mithril.js vs. React

• Maht: Mithril.js on oluliselt väiksem kui React.
• Jõudlus: Mithril.js ületab võrdlustestides sageli Reacti, eriti keerukate kasutajaliideste puhul.
• API: Mithril.js-il on lihtsam ja lühem API kui Reactil.
• JSX: React kasutab JSX-i, mis on JavaScripti süntaksilaiend. Mithril.js kasutab virtuaalsete DOM-sõlmede loomiseks puhast JavaScripti.
• Ökosüsteem: Reactil on suurem ja küpsem ökosüsteem laiema valiku teekide ja tööriistadega.

Mithril.js vs. Angular

• Maht: Mithril.js on palju väiksem kui Angular.
• Keerukus: Angular on täisfunktsionaalne raamistik, millel on järsem õppimiskõver kui Mithril.js-il.
• Paindlikkus: Mithril.js pakub rohkem paindlikkust ja vähem struktuuri kui Angular.
• TypeScript: Angularit kasutatakse tavaliselt koos TypeScriptiga. Mithril.js-i saab kasutada nii TypeScriptiga kui ka ilma.
• Andmesidumine (Data Binding): Angular kasutab kahesuunalist andmesidumist, samas kui Mithril.js kasutab ühesuunalist andmevoogu.

Mithril.js vs. Vue.js

• Maht: Mithril.js on üldiselt väiksem kui Vue.js.
• Õppimiskõver: Mõlemal raamistikul on suhteliselt lauged õppimiskõverad.
• Mallid (Templating): Vue.js kasutab HTML-põhiseid malle, samas kui Mithril.js kasutab virtuaalsete DOM-sõlmede loomiseks puhast JavaScripti.
• Kogukond: Vue.js-il on suurem ja aktiivsem kogukond kui Mithril.js-il.

Mithril.js-i kasutusjuhud

Mithril.js sobib hästi mitmesuguste projektide jaoks, sealhulgas:

• Ühelehelised rakendused (SPA): Selle marsruutimine ja komponendipõhine arhitektuur teevad sellest ideaalse valiku SPA-de ehitamiseks.
• Juhtpaneelid ja halduspaneelid: Selle jõudlus ja väike maht teevad sellest hea valiku andmemahukate rakenduste jaoks.
• Mobiilirakendused: Selle väike maht on kasulik piiratud ressurssidega mobiilseadmetele.
• Veebimängud: Selle jõudlus on ülioluline sujuvate ja reageerimisvõimeliste veebimängude loomisel.
• Manussüsteemid: Selle väike maht muudab selle sobivaks piiratud mäluga manussüsteemidele.
• Jõudluspiirangutega projektid: Iga projekt, kus laadimisaegade minimeerimine ja jõudluse maksimeerimine on esmatähtis. See on eriti oluline aeglase internetiühendusega piirkondade kasutajatele, näiteks arengumaades.

Mithril.js arenduse parimad praktikad

• Kasutage komponente: Jaotage oma rakendus korduvkasutatavateks komponentideks, et parandada koodi organiseeritust ja hooldatavust.
• Hoidke komponendid väikesed: Vältige liiga keerukate komponentide loomist. Väiksemaid komponente on lihtsam mõista, testida ja taaskasutada.
• Järgige MVC mustrit: Järgige MVC arhitektuurimustrit, et oma koodi struktureerida ja vastutusalasid eraldada.
• Kasutage ehitustööriista: Kasutage ehitustööriista nagu Webpack või Parcel, et oma koodi komplekteerida ja sõltuvusi tõhusalt hallata.
• Kirjutage ühikteste: Kirjutage ühikteste, et tagada oma koodi kvaliteet ja usaldusväärsus.
• Optimeerige jõudlust: Kasutage jõudluse parandamiseks tehnikaid nagu koodi tükeldamine (code splitting) ja laisk laadimine (lazy loading).
• Kasutage linterit: Kasutage linterit nagu ESLint, et jõustada kodeerimisstandardeid ja püüda kinni potentsiaalseid vigu.
• Hoidke end ajakohasena: Hoidke oma Mithril.js-i versioon ja sõltuvused ajakohasena, et saada kasu veaparandustest ja jõudluse täiustustest.

Kogukond ja ressursid

Kuigi Mithril.js-i kogukond on väiksem kui suurematel raamistikel, on see aktiivne ja toetav. Siin on mõned ressursid, mis aitavad teil Mithril.js-i kohta rohkem teada saada:

• Ametlik veebisait: https://mithril.js.org/
• Dokumentatsioon: https://mithril.js.org/documentation.html
• GitHubi repositoorium: https://github.com/MithrilJS/mithril.js
• Gitteri vestlus: https://gitter.im/MithrilJS/mithril.js
• Mithril.js-i kokaraamat: Kogukonna hallatav ressurss praktiliste näidete ja retseptidega.

Kokkuvõte